<template>
	<view class="chexing">
		<!-- 车辆列表 -->
		<view class="che" v-for="vehicle in vehicleDataList" :key="vehicle.id">
			<view class="img">
				<img :src="vehicle.imageSrc" />
			</view>
			<view>
				<view>车型：{{vehicle.model}}</view>
				<view style="font-size: 26rpx; margin-top: 20rpx;">车牌：{{vehicle.licensePlate}}</view>
			</view>
			<img v-if="vehicle.id==qiche.id" class="img2" src="@/static/lyl-img/cheliang/xuanzhong.png" alt="" />
			<img @click="getChe(vehicle)" v-if="vehicle.id!=qiche.id" class="img2"
				src="@/static/lyl-img/cheliang/yuan.png" alt="" />
		</view>


		<!-- 添加车辆 -->
		<view @click="add" class="add">
			<img src="@/static/lyl-img/cheliang/加号@3x.png" />
			<text @click="add">添加车辆</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qiche: {},
				vehicleDataList: [{
						id: 1,
						imageSrc: '../../../static/logo.png',
						model: '奔驰-GR',
						licensePlate: '豫M34526'
					},
					{
						id: 2,
						imageSrc: '../../../static/logo.png',
						model: '宝马-X5',
						licensePlate: '豫M34527'
					},
					{
						id: 3,
						imageSrc: '../../../static/logo.png',
						model: '宝马-X5',
						licensePlate: '豫M34527'
					}
				]
			};
		},
		methods: {
			getChe(item) {
				this.qiche = item;
			},
			add() {
				let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2];
				let qiche = this.qiche;
				prevPage.$vm.otherFun(qiche) // 給上一頁綁定方法otherFun,傳參object
				uni.navigateBack({
					delta: 1 // 可以不傳delta值，默認為1
				})
			}
		}
	};
</script>

<style>
	.chexing {
		margin: 0;
		padding: 20rpx 30rpx;
		height: 400rpx;
		background-color: #3687fe;
	}

	.che {
		position: relative;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0),
			/*上边阴影  透明*/
			-10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*左边阴影  透明*/
			10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*右边阴影  透明*/
			0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		/*下边阴影 */
	}

	.img {
		float: left;
		height: 100rpx;
		width: 100rpx;
		margin-right: 10rpx;
	}

	.img img {
		border-radius: 50%;
		height: 100rpx;
		width: 100rpx;
	}

	.img2 {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 5%;
		top: 40%;
	}

	.add {
		text-align: center;
		width: 90%;
		height: 100rpx;
		background-color: #3687fe;
		heght: 100rpx;
		border-radius: 50rpx;
		position: absolute;
		bottom: 30rpx;
		left: 5%;
		color: white;

	}

	.add img {
		height: 30rpx;
		width: 30rpx;
		margin-top: 30rpx;
		margin-right: 40rpx;
	}

	.app text {

		margin-bottom: rpx;
	}
</style>